/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view >
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back" @click="back()">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<view class="search" v-if="!showManage">
				<!-- <input type="text" value="" placeholder="全部应用" /> -->
				<view class="input" @click="toSearch">全部应用</view>
				<uni-icon type="search" style='margin-left: 33upx;position: absolute;margin-top: 10upx;' size="20" color="#999999"></uni-icon>
			</view>
			<view class="manage"  v-if="showManage">
				<text>管理我的应用</text>
				<view class="manage-btn" @click="closeManage">完成</view>
			</view>
		</view>
		<view class="my" @click="dblBtn">
			<view class="my-title">
				<text class="my-title-text" v-if="!showManage">我的应用</text>
				<text class="my-title-change" v-if="showManage">将常用应用添加到首页，最多展示15个</text>
			</view>
			<view class="my-app-list" v-if="showOpen"> 
				<view class="my-app-item" @click="itemBtn(item.url)" v-for="(item,index) in myData" :key='index' v-if="item.isShow" >
					<uni-icon @click='minusItem(item)' v-if="showManage&&!item.must" type="clear-filled" style='padding: 20upx;position: absolute;right: -50upx;top:-40upx' size="20" color="#999999" ></uni-icon>
					<image :src="item.img" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="my-app-item"  v-if="!showManage"  @click="showOpen=false">
					<uni-icon type="arrowup" style='margin-left: 33upx;position: absolute;margin-top: 30upx;' size="20" color="rgba(102,102,102,1.00)"></uni-icon>
					<text>收起</text>
				</view>
			</view>
			<view class="my-app-mini" v-if="!showOpen">
				<view class="mini-list">
					<view class="mini-item" v-for="(item,index) in myData" :key='index' v-if="index<5">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="mini-item"  @click="showOpen=true">
						<image src="/static/gengduo.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="add-area" v-if="!showManage" @click="openManage">
				<text class="plus">+</text>
				<text class="add-area-text">添加应用</text>
			</view>
		</view>
		<view class="other" @click="dblBtn">
			<view class="other-title">
				<text class="other-title-text" >更多应用</text>
			</view>
			<view class="other-area">
				<text class="area-title">最近使用</text>
				<view class="other-list">
						<view class="other-item" @click="itemBtn(item.url)" v-if="!item.must" v-for="(item,index) in myData" :key='index'>
							<uni-icon @click='plusItem(item)'  v-if="showManage&&!item.isShow" type="plus-filled" style='padding: 20upx;position: absolute;right: -50upx;top:-40upx' size="20" color="rgba(84,177,255,1.00)" ></uni-icon>
							<image :src="item.img" mode=""></image>
							<text>{{item.name}}</text>
						</view>
				</view>
			</view>
			<view class="other-area">
				<text class="area-title">全部功能</text>
				<view class="other-list">
						<view class="other-item" @click="itemBtn(item.url)" v-for="(item,index) in myData" :key='index'  v-if="!item.must" >
							<uni-icon @click='plusItem(item)' v-if="showManage&&!item.isShow" type="plus-filled" style='padding: 20upx;position: absolute;right: -50upx;top:-40upx' size="20" color="rgba(84,177,255,1.00)" ></uni-icon>
							<image :src="item.img" mode=""></image>
							<text>{{item.name}}</text>
						</view>
				</view>
			</view>
			<view class="other-area">
				<text class="area-title">第三方服务</text>
				<view class="other-list">
						<view class="other-item" @click="itemBtn(item.url)" v-for="(item,index) in myData" :key='index' v-if="item.typeId==2&&!item.must" >
							<uni-icon @click='plusItem(item)' v-if="showManage&&!item.isShow" type="plus-filled" style='padding: 20upx;position: absolute;right: -50upx;top:-40upx' size="20" color="rgba(84,177,255,1.00)" ></uni-icon>
							<image :src="item.img" mode=""></image>
							<text>{{item.name}}</text>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight: global.statusBarHeight + 'px',
				showManage:false,
				showOpen:false,
				isDbl:false,
				myNum:0,
				myData:[
					{
						name:'旅游景区',
						img:'/static/lyjq.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/scenicSpot/scenicSpot'
					},
					{
						name:'宾馆入住',
						img:'/static/bgrz.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/hotel/hotel'
					},
					{
						name:'美食小吃',
						img:'/static/msxc.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/food/food'
					},
					{
						name:'出行票务',
						img:'/static/cxpw.png',
						isShow:true,
						typeId:1,
						must:true,
						url:''
					},
					{
						name:'休闲娱乐',
						img:'/static/xxyl.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/Recreation/recreation'
					},
					{
						name:'电商购物',
						img:'/static/dsgw.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/shop/shop'
					},
					{
						name:'见物识物',
						img:'/static/jwsb.png',
						isShow:true,
						typeId:1,
						must:true,
						url:''
					},
					{
						name:'团游旅行',
						img:'/static/tuanyou.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/crew/crew'
					},
					{
						name:'语音导览',
						img:'/static/yydy1.png',
						isShow:true,
						typeId:1,
						must:true,
						url:'/pages/home/scenicSpot/audio/spotAudio'
					},
					{
						name: '排队码',
						img: '/static/myPic/paiduima.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myLineUp/lineUp',
					},
					{
						name: '我的账单',
						img: '/static/myPic/zhangDan.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myBill/mybill',
					},
					{
						name: '我的成就',
						img: '/static/myPic/chengJiu.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myChengjiu/chengJiu',
					},
					{
						name: '我的足迹',
						img: '/static/myPic/zuJi.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myFoot/foot',
					},
					{
						name: '我的收藏',
						img: '/static/myPic/shouCang.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myCollection/collection',
					},
					{
						name: '合作加盟',
						img: '/static/myPic/jiaMeng.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/join/shopJoin/shopjoin',
					},
					{
						name: '会员中心',
						img: '/static/myPic/vip.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '',
					},
					{
						name: 'SOS',
						img: '/static/myPic/sos.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '',
					},
					{
						name: '上报POI',
						img: '/static/myPic/POI.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myPOI/myPOI',
					},
					{
						name: '离线地图',
						img: '/static/myPic/lixianMap.png',
						isShow:false,
						typeId:2,
						must:false,
						url: '/pages/my/myOfflineMap/cityList',
					},
				]
			}
		},
		methods: {
			openManage(){
				this.showManage = true
				this.showOpen = true
			},
			closeManage(){
				
				this.isDbl = false
				this.showManage = false
			},
			plusItem(obj){
				if(this.myNum<15&&!obj.isShow){
					this.myNum++
					obj.isShow = true
				}else{
					uni.showToast({
						title: '应用数量已达上限',
						duration: 1000
					});
				}
			},
			itemBtn(path){
				if(!this.showManage){
					uni.navigateTo({
						url:path
					})
				}
			},
			dblBtn(){
				if(this.showManage){
					if(!this.isDbl){
						this.isDbl = true
					}else{
						this.closeManage()
					}
					setTimeout(()=>{
						this.isDbl = false
					},300)
				}
			},
			minusItem(obj){
				obj.isShow = false
				this.myNum--
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toSearch(){
				uni.navigateTo({
					url:'moreSearch'
				})
			}
		},
		created(){
			this.myData.forEach((item)=>{
				if(item.isShow){
					this.myNum++
				}
			})
		},
		components:{
			uniIcon
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 100%;
		height: calc(80upx + var(--status-bar-height));
		position: fixed;
		top: 0;
		display: table;
		z-index: 5;
		background: #FFFFFF;
	}
	.back{
		width: 80upx;
		height: 80upx;
		z-index: 2;
		float: left;
		position: absolute;
	}
	.back image{
		margin: 22upx;
		width: 36upx;
		height: 36upx;
	}
	.search{
		width: 602upx;
		height: 80upx;
		/* padding:0 30upx; */
		left: 80upx;
		position: absolute;
		padding-top: 10upx;
		float: left;
	}
	.search .input{
		width: 446upx;
		background: rgba(245,245,245,1.00);
		border-radius: 30upx;
		height: 60upx;
		padding:0 78upx;
		position: absolute;
		color: rgba(204,204,204,1.00);
		line-height: 60upx;
		font-size: 28upx;
	}
	.manage{
		width: 670upx;
		height: 80upx;
		/* background: #007AFF; */
		float: left;
	}
	.manage text{
		font-size: 34upx;
		width: 100%;
		position: absolute;
		text-align: center;
		display: block;
		height: 80upx;
		line-height: 80upx;
		left: 0;
		z-index: 1;
	}
	.manage-btn{
		width: 124upx;
		height: 50upx;
		border-radius: 30upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		line-height: 50upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		float: right;
		margin-top: 15upx;
		right: 43upx;
		position: absolute;
		z-index: 2;
	}
	/* 我的应用 */
	.my{
		width: 100%;
		margin-top: calc(80upx + var(--status-bar-height));
		height: auto;
		display: table;
		border-bottom: rgba(240,240,240,1.00) solid 8upx;
	}
	.my-title{
		width: 100%;
		margin-top: 52upx;
		height: 60upx;
	}
	.my-title-text{
		width: 100%;
		height: 60upx;
		display: block;
		font-size: 34upx;
		text-align: center;
	}
	.my-title-change{
		width: 629upx;
		height: 60upx;
		margin-left: 78upx;
		display: block;
		padding-left: 6upx;
		color: rgba(102,102,102,1.00);
		font-size: 26upx;
	}
	.my-app-list{
		width: 620upx;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 63upx;
		/* justify-content: space-between; */
	}
	.my-app-item{
		width: 100upx;
		height: 100upx;
		margin-left: 73upx;
		position: relative;
		margin-top: 39upx;
	}
	.my-app-item:nth-child(4n+1) , .my-app-item:first-child{
		margin-left: 0upx;
	}
	.my-app-item image{
		width: 70upx;
		height: 60upx;
		margin-left: 15upx;
	}
	.my-app-item text{
		width: 100upx;
		text-align: center;
		display: block;
		color: rgba(102,102,102,1.00);
		position: absolute;
		bottom: 0;
		font-size: 24upx;
	}
	.my-app-mini{
		width: 100%;
		height: 46upx;
	}
	.mini-list{
		width: 100%;
		height: 46upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20upx;
	}
	.mini-item{
		width: 46upx;
		height: 46upx;
		position: relative;
		background: rgba(243,243,243,1.00);
		border-radius: 50%;
		margin-left: 2upx;
		margin-right: 2upx;
	}
	.mini-item image{
		width: 35upx ;
		/* margin-top: 4upx; */
		position: absolute;
		top: 8upx;
		margin-left: 8upx  ;
		height: 30upx  ; 
	}
	.mini-item:last-child image{
		width: 46upx ;
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 0upx  ;
		height: 46upx;
	}
	.add-area{
		border: rgba(220,220,220,0.5) solid 1upx;
		border-radius: 5upx;
		width: 523upx;
		margin-bottom: 70upx;
		margin-left: auto;
		margin-right: auto;
		height: 100upx;
		margin-top: 60upx;
		text-align: center;
	}
	.plus{
		font-size: 45upx;
		color: rgba(153,153,153,1.00);
		width: 100%;
		height: 40upx;
		text-align: center;
		display: block;
	}
	.add-area-text{
		font-size: 26upx;
		color: rgba(153,153,153,1.00);
	}
	/* 其他应用 */
	.other{
		width: 100%;
		margin-top:20upx;
		height: auto;
		display: table;
	}
	.other-title{
		width: 100%;
		margin-top: 52upx;
		height: 80upx;
	}
	.other-title-text{
		width: 100%;
		height: 80upx;
		display: block;
		font-size: 34upx;
		text-align: center;
	}
	.other-area{
		width: 100%;
		height: auto;
		display: table;
	}
	.area-title{
		margin-left: 41upx;
		font-size: 30upx;
	}
	.other-list{
		width: 620upx;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 63upx;
	}
	.other-item{
		width: 100upx;
		height: 100upx;
		margin-left: 73upx;
		position: relative;
		margin-top: 39upx;
	}
	.other-item image{
		width: 70upx;
		height: 60upx;
		margin-left: 15upx;
	}
	.other-item text{
		width: 100upx;
		text-align: center;
		display: block;
		color: rgba(102,102,102,1.00);
		position: absolute;
		bottom: 0;
		font-size: 24upx;
	}
	.other-item:nth-child(4n+1) , .other-item:first-child{
		margin-left: 0upx;
	}
</style>
